<template>
  <div class="com-container">
    <el-container>
      <el-aside width="220px"> </el-aside>
      <el-container>
        <el-header height="40px">Header</el-header>
        <el-main>
          <div class="main-container">
            <div class="left-box container-box">
              <!-- 健康度排序组件 -->
              <div class="health-box shadow radius">
                <health ref="health" />
              </div>
              <!-- 告警组件 -->
              <div class="alarm-box shadow radius">
                <alarm ref="alarm" />
              </div>
            </div>
            <div class="center-box container-box">
              <!-- 地图组件 -->
              <div class="map-box shadow radius">
                <Map ref="map" @changCity="changCity" />
              </div>
              <!-- 全息健康度组件 -->
              <div class="holographic-box shadow radius">
                <holographic ref="holographic" />
              </div>
            </div>
            <div class="right-box container-box">
              <!-- 当前分层健康度组件 -->
              <div class="layerd-now-box shadow radius">
                <layerd-now ref="layerdNow" />
              </div>
              <!-- 历史分层健康度组件 -->
              <div class="layerd-old-box shadow radius">
                <layerd-old ref="layerdOld" />
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Health from "@/components/Health.vue";
import Holographic from "@/components/Holographic.vue";
import LayerdNow from "@/components/LayerdNow.vue";
import LayerdOld from "@/components/LayerdOld.vue";
import Map from "@/components/Map.vue";
import Alarm from "@/components/Alarm.vue";
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  components: {
    Health,
    Holographic,
    "layerd-now": LayerdNow,
    "layerd-old": LayerdOld,
    Map,
    Alarm,
  },
  data() {
    return {
      msg: "",
    };
  },
  computed: {
    ...mapState(["civilCode"]),
  },
  beforeCreate() {},
  mounted() {
      const civilCode = this.$cookies.get("vims_civilCode");
      this.setCivilCode(civilCode);
    this.initMoudles()
  },
  created() {
    this.$cookies.set("vims_civilCode", "420000");
  },
  methods: {
    ...mapMutations(["setCivilCode"]),
    ...mapGetters(["getmapPath"]),
    initMoudles() {
      this.$nextTick(() => {
        if (this.$store.state.civilCode) {
          let arr = Object.keys(this.$refs);
          arr.forEach((item) => {
            this.$refs[item].initMoudle();
          });
        }
      });
    },
    changCity() {
      this.$store.commit('setGroupType','day')
      this.initMoudles()
    },
  },
};
</script>

<style lang="less" scoped>
a {
  display: block;
  width: 70px;
  height: 40px;
  color: #000;
  margin-left: calc(50% - 25px);
  margin-top: 10px;
  text-decoration: none;
  background-color: #fff;
}

.com-container {
  width: 100%;
  height: 100%;
}
.el-header {
  background-color: #f8f9fa;
  color: #333;
  text-align: center;
  line-height: 40px;
  border: 1px solid #ccc;
}

.el-aside {
  background-color: #01204c;
  color: #333;
  text-align: center;
  // line-height: 200px;
  width: 220px;
  height: 100%;
}

.el-main {
  width: 100%;
  height: calc(100% - 64px);
  background-color: #f8f9fa;
  color: #333;
  text-align: center;
  .main-container {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    // background-color: pink;
    .container-box {
      position: relative;
      height: 100%;
      // 地图
      .map-box {
        background-color: #fff;
        height: 60%;
        margin-bottom: 20px;
      }
      // 健康度排序
      .health-box {
        height: 50%;
        background-color: #ccc;
        margin-bottom: 20px;
      }
      /// 当前分层健康度
      .layerd-now-box {
        height: 50%;
        background-color: #ccc;
        margin-bottom: 20px;
      }
      // 历史分层健康度
      .layerd-old-box {
        height: calc(~"(50% - 20px)");
        background-color: #fff;
      }
      // 告警
      .alarm-box {
        height: calc(~"(50% - 20px)");
        background-color: #fff;
      }
      //全息健康度
      .holographic-box {
        height: calc(~"(40% - 20px)");
        background-color: #fff;
      }
    }
    .left-box {
      flex: 3;
    }
    .center-box {
      margin: 0 20px;
      flex: 4;
    }
    .right-box {
      flex: 3;
    }
  }
}
.el-container {
  width: 100%;
  height: 100%;
}
</style>